<template>
  <div :class="['cell',{'vtop':!showEllipsis}]" @click.stop="clickHandle">
    <span v-if="label!==undefined" class="label">{{ label }}</span>
    <div class="value" :style="{fontWeight: weight}">
      <span :class="['text',{'ellipsis':showEllipsis}]">{{ value }}</span>
      <template v-if="right">
        <slot>
          <svg-icon class="icon" icon-class="xiangyou" @click.native.stop="directionHandle" />
        </slot>
      </template>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Cell',
  props: {
    label: {
      type: String,
      default: undefined
    },
    value: {
      type: [String, Number, Object, Array],
      default: ''
    },
    right: {
      type: Boolean,
      default: true
    },
    showEllipsis: {
      type: Boolean,
      default: true
    },
    weight: {
      type: String,
      default: '400'
    }
  },
  data() {
    return {
    }
  },
  methods: {
    clickHandle() {
      this.$emit('click')
    },
    directionHandle() {
      this.$emit('right')
    }
  }
}
</script>
<style lang="less" scoped>
.cell{
  padding: 10px 12px;
  background-color: #fff;
  display: flex;
  align-items: center;
  overflow: hidden;
  line-height: 18px;
  &.vtop{
    align-items:flex-start;
  }
  .label{
    font-size: 14px;
    color: rgba(153, 153, 153, 1);
    margin-right: 30px;
    flex: 0 0 auto;
  }
  .value{
    flex: 1 1 auto;
    overflow: hidden;
    font-size: 14px;
    color: rgba(51, 51, 51, 1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .text{
      flex: 0 0 calc(100% - 12px);
      display: block;
      &.ellipsis{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .icon{
      flex: 0 0 12px;
      font-size: 12px;
      color: rgba(136, 136, 136, 1);
    }
  }
}
</style>
